<template>
    <div>
        <Form inline>
            <FormItem>
                <Input v-model="params.login_name" placeholder="产品名称"/>
            </FormItem>
            <FormItem>
                <Button type="success" @click="search">搜索</Button>
            </FormItem>
        </Form>
        <wl-resource-table headerShow @addAction="modalAdd" @editAction="edit" :params="params"
                           ref="wlTable"></wl-resource-table>
        <wl-resource-form
                :show="modelFormShow"
                :options="filitionOption"
                @result="formResult"
                @cancelShow="cancelShow">
        </wl-resource-form>
    </div>
</template>

<script>
import WlResourceTable from '@/components/wl-resource-table/'
import WlResourceForm from './wl-resource-form/'
import { getCategoryTree } from '@/api/school'

export default {
  components: { WlResourceForm, WlResourceTable },
  data () {
    return {
      params: {
        login_name: ''
      },
      modelFormShow: false,
      type: 'add',
      options: {
        // 表单属性 非必需
        formProps: {
          'label-width': 80
        },
        // 表单数据 必需
        formData: {
          id: '',
          title: '',
          pid: 0
        },
        // 表单项组件数据 必需
        formItem: [
          {
            type: 'select',
            label: '选择类别',
            key: 'pid',
            children: [
              {
                value: 0,
                label: '顶级分类'
              }
            ]
          },
          {
            type: 'input',
            key: 'title',
            label: '标题',
            props: {
              placeholder: '输入分类名称...'
            },
            rules: {
              required: true, trigger: 'blur', message: '分类名不能空'
            }
          }
        ]
      }
    }
  },
  computed: {
    filitionOption () {
      return this.options
    },
    getUserInfo () {
      return this.$store.state.user.severUserInfo.data
    }
  },
  mounted () {
    this.getCategoryData()
  },
  methods: {
    search () {
      this.$refs.wlTable.getList()
    },
    formResult (data) {
      if (data.errcode === 1001) {
        this.type === 'add' ? this.$Message.success('新增成功！') : this.$Message.success('编辑成功！')
        this.modelFormShow = false
        this.$refs.wlTable.getList()
      } else {
        this.$Message.success(data.errmsg)
      }
    },
    edit (row) {
      console.log(row)
      this.type = 'edit'
      this.options.formData = row
      this.modelFormShow = true
    },
    modalAdd () {
      this.options.formData = {
        id: '',
        title: '',
        type: 1
      }
      this.getCategoryData()
      this.modelFormShow = true
    },
    cancelShow () {
      this.modelFormShow = false
    },
    getCategoryData () {
      getCategoryTree().then(ret => {
        let listData = ret.data.data
        let selectOption = [{ label: '顶级分类', value: 0 }]
        listData.forEach(item => {
          selectOption.push({ label: item.title, value: item.id })
          if (item.childs && item.childs.length > 0) {
            item.childs.forEach(item1 => {
              selectOption.push({ label: this.getStringLine(2, item1.title), value: item1.id })
            })
          }
        })
        this.options.formItem[0].children = selectOption
      })
    },
    getStringLine (index, name) {
      let line = '-'
      for (let i = 0; i < index; i++) {
        line += '-'
      }
      return line + name
    }
  }
}
</script>

<style scoped>
    .actionBtn {
        margin-right: 5px;
        margin-bottom: 5px;
    }

    .page {
        text-align: right;
        margin-top: 10px;
    }

    .input {
        width: 280px;
    }

</style>
